<template>
  <div class="bigBox">
    <borderomponent>
      <!-- <template v-slot:content> -->
      <dialogXinzengchengyuan
        :isdialogVisibleNew="isDialogVisible"
        @jianting="jianting"
        @name="getName"
      ></dialogXinzengchengyuan>
      <selectPersonPopup
        @getHeadName="getHeadName"
        @addMembers="addMembers"
        @close="clsoe"
        :isOuterVisible="isOuterVisible"
      ></selectPersonPopup>
      <div class="bigBox-box">
        <div class="newBox-title">{{ numberValidateForm?.storeName }}</div>
        <switchTab
          class="newBox-title1"
          :tabArr="tabArr"
          @getTabindex="getTabindex"
        ></switchTab>
        <div v-show="TabIndex == 0" class="bigBox-box-tab">
          <!-- <Btitle title="仓库信息"></Btitle> -->
          <el-form
            :model="numberValidateForm"
            ref="numberValidateForm"
            style="text-align: right"
          >
            
            <div class="new-List-box">
              <div class="new-List-box-title">
                <div style="color: #ff6a6b; font-size: 16px; font-family: MicrosoftYaHei">
                  *
                </div>
                权属性质
              </div>
              <div class="new-List-box-name">
                <el-form-item
                  label=""
                  prop="storeNature"
                  hide-required-asterisk="true"
                  :rules="{
                    required: true,
                    message: '请选择权属性质',
                    trigger: 'blur',
                  }"
                >
                  <el-select
                    v-if="isEdit"
                    style="width: 380px"
                    v-model="numberValidateForm.storeNature"
                    placeholder="请选择权属性质"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.label"
                    >
                    </el-option>
                  </el-select>
                  <div v-if="!isEdit">
                    {{ numberValidateForm?.storeNature }}
                  </div>
                </el-form-item>
              </div>
              <div class="new-List-box-title">
                <div style="color: #ff6a6b; font-size: 16px; font-family: MicrosoftYaHei">
                  *
                </div>
                物资库地址
              </div>
              <div class="new-List-box-name">
                <el-form-item
                  label=""
                  prop="address"
                  hide-required-asterisk="true"
                  :rules="[
                    {
                      required: true,
                      message: '请输入地址',
                      trigger: 'blur',
                    },
                  ]"
                  style="text-align: right"
                >
                  <el-input
                    v-if="isEdit"
                    style="width: 380px"
                    placeholder="请输入地址"
                    v-model="numberValidateForm.address"
                  ></el-input>
                  <div v-else>{{ numberValidateForm.address }}</div>
                </el-form-item>
              </div>
              <div class="new-List-box-title">
                <div style="color: #ff6a6b; font-size: 16px; font-family: MicrosoftYaHei">
                  *
                </div>
                经纬度
              </div>
              <div class="new-List-box-name">
                <el-form-item
                  hide-required-asterisk="true"
                  :rules="{
                    message: '请选择经纬度',
                    trigger: 'blur',
                  }"
                  label=""
                  prop="address"
                >
                  <NewMap
                    v-if="isEdit"
                    style="width: 380px"
                    @childByValue="childValue"
                    @getAddress="getAddress"
                    :Newaddress="Newaddress"
                  ></NewMap>
                  <div v-else>
                    经度：{{ numberValidateForm?.coordinateY?.toFixed(8) }}纬度：{{
                      numberValidateForm?.coordinateX?.toFixed(8)
                    }}
                  </div>
                </el-form-item>
              </div>
              <!-- <div class="new-List-box-name">{{ numberValidateForm?.teamType }}</div> -->
            </div>
            <div class="new-List-box">
              <div class="new-List-box-title">
                <div style="color: #ff6a6b; font-size: 16px; font-family: MicrosoftYaHei">
                  *
                </div>
                仓库面积(㎡)
              </div>
              <div class="new-List-box-name">
                <el-form-item
                  label=""
                  prop="storeArea"
                  hide-required-asterisk="true"
                  :rules="{
                    required: true,
                    message: '请输入仓库面积',
                    trigger: 'blur',
                  }"
                >
                  <el-input
                    style="width: 380px"
                    placeholder="请输入仓库面积"
                    v-model="numberValidateForm.storeArea"
                    v-if="isEdit"
                  ></el-input>
                  <div v-if="!isEdit">
                    {{ numberValidateForm?.storeArea }}
                  </div>
                </el-form-item>
              </div>
              <div class="new-List-box-title">
                <div style="color: #ff6a6b; font-size: 16px; font-family: MicrosoftYaHei">
                  *
                </div>
                负责人
              </div>
              <div class="new-List-box-name">
                <el-form-item
                  hide-required-asterisk="true"
                  :rules="{
                    required: true,
                    message: '请输入负责人',
                    trigger: 'blur',
                  }"
                  label=""
                  prop="headName"
                  style="text-align: right"
                >
                  <el-input
                    v-if="isEdit"
                    style="width: 380px"
                    disabled
                    placeholder="请选择负责人"
                    v-model="numberValidateForm.headName"
                  >
                    <template slot="append">
                      <div class="append-box" @click="tianjia(true)">
                        <div>选择负责人</div>
                        <div class="append-img renyuan"></div>
                      </div>
                    </template>
                  </el-input>
                  <div v-else>{{ numberValidateForm.headName }}</div>
                </el-form-item>
              </div>
              <div class="new-List-box-title">
                <div style="color: #ff6a6b; font-size: 16px; font-family: MicrosoftYaHei">
                  *
                </div>
                负责人电话
              </div>
              <div class="new-List-box-name">
                <el-form-item
                  hide-required-asterisk="true"
                  :rules="{
                    required: true,
                    message: '请输入负责人电话',
                    trigger: 'blur',
                  }"
                  label=""
                  prop="headPhone"
                  style="text-align: right"
                >
                  <el-input
                    v-if="isEdit"
                    style="width: 380px"
                    placeholder="请输入负责人电话"
                    v-model="numberValidateForm.headPhone"
                  ></el-input>
                  <div v-else>{{ numberValidateForm.headPhone }}</div>
                </el-form-item>
              </div>
            </div>

            <!-- <div
              class="bigBox-box-tab-item"
              :style="{ marginBottom: isEdit ? '25px' : '0' }"
            >
              <el-form-item
                label="物资库名称："
                prop="storeName"
                style="text-align: right"
              >
                <div class="bigBox-box-tab-item-xq" style="line-height: 32px">
                  {{ numberValidateForm?.storeName }}
                </div>
              </el-form-item>
              <el-form-item
                label="权属性质："
                prop="storeNature"
                hide-required-asterisk="true"
                :rules="{
                  required: true,
                  message: '请选择权属性质',
                  trigger: 'blur'
                }"
                style="text-align: right"
              >
                <el-select
                  v-if="isEdit"
                  class="bigBox-box-tab-item-xq"
                  v-model="numberValidateForm.storeNature"
                  placeholder="请选择权属性质"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label"
                  >
                  </el-option>
                </el-select>
                <div
                  class="bigBox-box-tab-item-xq"
                  v-if="!isEdit"
                  style="line-height: 32px"
                >
                  {{ numberValidateForm?.storeNature }}
                </div>
              </el-form-item>
              <el-form-item
                label="仓库面积(㎡)："
                prop="storeArea"
                style="text-align: right"
                hide-required-asterisk="true"
                :rules="{
                  required: true,
                  message: '请输入仓库面积',
                  trigger: 'blur'
                }"
              >
                <el-input
                  class="bigBox-box-tab-item-xq"
                  placeholder="请输入仓库面积"
                  v-model="numberValidateForm.storeArea"
                  v-if="isEdit"
                ></el-input>
                <div
                  class="bigBox-box-tab-item-xq"
                  v-if="!isEdit"
                  style="line-height: 32px"
                >
                  {{ numberValidateForm?.storeArea }}
                </div>
              </el-form-item>
            </div>
            <div
              class="bigBox-box-tab-item"
              style="height: 42px"
              :style="{ marginBottom: isEdit ? '25px' : '0' }"
            >
              <el-form-item
                hide-required-asterisk="true"
                :rules="{
                  required: true,
                  message: '请输入地址',
                  trigger: 'blur'
                }"
                label="物资库地址："
                prop="address"
                style="text-align: right"
              > -->
            <!-- <el-input
                class="bigBox-box-tab-item-xq"
                  placeholder="请输入关键词选择地址"
                  v-model="numberValidateForm.address"
                >
                  <template slot="append">
                    <div class="append-box">
                      <div>选择地址</div>
                      <div class="append-img"></div>
                    </div>
                  </template>
                </el-input> -->
            <!-- <NewMap
                  @childByValue="childValue"
                  @getAddress="getAddress"
                  :Newaddress="Newaddress"
                  :newClass="true"
                  v-if="isEdit"
                  style="450px"
                ></NewMap>
                <div
                  class="bigBox-box-tab-item-xq"
                  v-if="!isEdit"
                  style="line-height: 32px"
                >
                  {{ numberValidateForm.address }}
                </div>
              </el-form-item>

              <el-form-item
                hide-required-asterisk="true"
                :rules="{
                  required: true,
                  message: '请输入负责人',
                  trigger: 'blur'
                }"
                label="负责人："
                prop="headName"
                style="text-align: right"
              >
                <el-input
                  disabled
                  class="bigBox-box-tab-item-xq"
                  placeholder="请选择负责人"
                  v-model="numberValidateForm.headName"
                  v-if="isEdit"
                >
                  <template slot="append">
                    <div class="append-box" @click="tianjia(true)">
                      <div>选择负责人</div>
                      <div class="append-img renyuan"></div>
                    </div>
                  </template>
                </el-input>
                <div
                  class="bigBox-box-tab-item-xq"
                  v-if="!isEdit"
                  style="line-height: 32px"
                >
                  {{ numberValidateForm.headName }}
                </div>
              </el-form-item>
              <el-form-item
                hide-required-asterisk="true"
                :rules="[
                  {
                    required: true,
                    message: '负责人电话',
                    trigger: 'blur'
                  },
                  {
                    min: 11,
                    max: 11,
                    message: '请输入11位手机号',
                    trigger: 'blur'
                  }
                ]"
                label="负责人电话："
                prop="headPhone"
                style="text-align: right"
              >
                <el-input
                  v-if="isEdit"
                  class="bigBox-box-tab-item-xq"
                  placeholder="请输入负责人电话"
                  v-model="numberValidateForm.headPhone"
                ></el-input>
                <div
                  class="bigBox-box-tab-item-xq"
                  v-if="!isEdit"
                  style="line-height: 32px"
                >
                  {{ numberValidateForm.headPhone }}
                </div>
              </el-form-item> -->
            <!-- </div> -->
            <Btitle title="物资列表"></Btitle>
            <switchTab :tabArr="wzTabArr" @getTabindex="getwzTabindex"></switchTab>
            <div
              style="
                width: 100%;
                display: flex;
                justify-content: flex-start;
                margin-top: 21px;
              "
            >
              <tx-button-add name="添加物资" @click="addMaterial" v-if="isEdit" />
            </div>

            <div>
              <tx-list-table
                :table="table"
                ref="newlistTable"
                row-key="name"
                :height="isEdit ? '320' : '360'"
              >
                <tx-table-column-text label="排序" width="60">
                  <template slot-scope="scope">
                    <div>
                      <span>{{ scope.scope.scope.$index + 1 }}</span>
                    </div>
                  </template>
                </tx-table-column-text>
                <tx-table-column-text label="物资类型">
                  <template slot-scope="scope">
                    <div v-if="!scope.row.editing" class="wenanjuzhong">
                      <span>{{ scope.row.secondStoreType }}</span>
                    </div>
                    <div v-if="scope.row.editing">
                      <el-select
                        v-model="scope.row.secondStoreType"
                        placeholder="请选择物资类型"
                        :rules="{
                          required: true,
                          message: '请选择物资类型',
                          trigger: 'blur',
                        }"
                      >
                        <el-option
                          v-for="item in zboptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.label"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </template>
                </tx-table-column-text>
                <tx-table-column-text label="物资名称">
                  <template slot-scope="scope">
                    <div v-if="!scope.row.editing" class="wenanjuzhong">
                      <span>{{ scope.row.storeName }}</span>
                    </div>
                    <div v-if="scope.row.editing">
                      <el-input
                        v-model="scope.row.storeName"
                        class="input-table-edit"
                        placeholder="请输入物资名称"
                      ></el-input>
                    </div>
                  </template>
                </tx-table-column-text>
                <tx-table-column-text label="物资规格">
                  <template slot-scope="scope">
                    <div v-if="!scope.row.editing" class="wenanjuzhong">
                      <span>{{ scope.row.storeSpecs }}</span>
                    </div>
                    <div v-if="scope.row.editing">
                      <el-input
                        v-model="scope.row.storeSpecs"
                        class="input-table-edit"
                        placeholder="请输入物资规格"
                      ></el-input>
                    </div>
                  </template>
                </tx-table-column-text>
                <tx-table-column-text label="物资数量">
                  <template slot-scope="scope">
                    <div v-if="!scope.row.editing" class="wenanjuzhong">
                      <span>{{ scope.row.storeNum }}</span>
                    </div>
                    <div v-if="scope.row.editing">
                      <el-input
                        type="number"
                        v-model="scope.row.storeNum"
                        class="input-table-edit"
                        placeholder="请输入物资数量"
                      ></el-input>
                    </div>
                  </template>
                </tx-table-column-text>
                <tx-table-column-text label="物资单位">
                  <template slot-scope="scope">
                    <div v-if="!scope.row.editing" class="wenanjuzhong">
                      <span>{{ scope.row.unit }}</span>
                    </div>
                    <div v-if="scope.row.editing">
                      <el-input
                        v-model="scope.row.unit"
                        class="input-table-edit"
                        placeholder="请输入物资单位"
                      ></el-input>
                    </div>
                  </template>
                </tx-table-column-text>
                <tx-table-column-action v-if="isEdit" width="230" label="操作项">
                  <template slot-scope="scope">
                    <el-button
                      type="primary"
                      size="mini"
                      v-if="!scope.row.editing"
                      class="table-edit-btn"
                      @click="handleEdit(scope)"
                      >编辑
                    </el-button>
                    <el-button
                      type="primary"
                      size="mini"
                      v-if="scope.row.editing"
                      @click="handleSave(scope)"
                      class="table-save-btn"
                      >确定
                    </el-button>
                    <el-button
                      size="mini"
                      type="warning"
                      v-if="scope.row.editing"
                      @click="handleCancel(scope)"
                      class="table-cancel-btn"
                      >取消
                    </el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      v-if="scope.row.editing"
                      @click="handleDelete(scope)"
                      class="table-del-btn"
                      >删除
                    </el-button>
                  </template>
                </tx-table-column-action>
              </tx-list-table>
              {{
                $nextTick(() => {
                  $initDragTable($refs["newlistTable"], table.page, "records");
                })
              }}
            </div>
            <div
              v-if="$route.query.depId"
              style="
                width: 180px;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                position: absolute;
                right: 20px;
                top:90px;
              "
            >
              <el-button size="mini" type="danger" @click="Back" class="table-cancel-btn"
                >返回
              </el-button>
            </div>
            <div
              v-else
              style="
                width: 180px;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                position: absolute;
                right: 20px;
                top: 90px;
              "
            >
              <el-button
                @click="bianji"
                v-if="!isEdit"
                style="
                  border: 1px solid #38c2c6;
                  background: #38c2c6;
                  border-radius: 4px;
                  font-size: 16px;
                  font-family: MicrosoftYaHei;
                  color: rgba(255, 255, 255, 0.9);
                "
                >编辑</el-button
              >
              <el-button
                v-if="isEdit"
                size="mini"
                type="danger"
                @click="Back"
                class="table-cancel-btn"
                >返回
              </el-button>
              <el-button
                v-if="isEdit"
                @click="submitForm('numberValidateForm')"
                style="
                  border: 1px solid #38c2c6;
                  background: #38c2c6;
                  border-radius: 4px;
                  font-size: 16px;
                  font-family: MicrosoftYaHei;
                  color: rgba(255, 255, 255, 0.9);
                "
                >保存</el-button
              >
            </div>
          </el-form>
        </div>
        <div v-show="TabIndex != 0" class="bigBox-box-tab">
          <Sort></Sort>
        </div>
      </div>
      <!-- </template> -->
    </borderomponent>
  </div>
</template>

<script>
import borderomponent from "@/components/borderomponent/index.vue";
import switchTab from "@/components/switchTab/index.vue";
import Btitle from "@/components/Btitle/index.vue";
import Sort from "./components/sort.vue";
import selectPersonPopup from "@/components/selectPersonPopup/index.vue";
import NewMap from "@/components/egis-map/map.vue";
import {
  storeInfoGetByDepId,
  storeInfoSaveOrUpdate,
  storeInfoGetStoreInfo,
} from "@/api/resourceManagement/index.js";
import dialogXinzengchengyuan from "@/components/dialog-xinzengchengyuan.vue";
export default {
  name: "TeamAdministrator",
  components: {
    borderomponent,
    switchTab,
    Btitle,
    Sort,
    selectPersonPopup,
    NewMap,
    dialogXinzengchengyuan,
  },
  data() {
    return {
      List1: 0,
      List2: 0,
      List3: 0,
      List4: 0,
      List5: 0,
      isEdit: false,
      tabBiaoshi: "01",
      wzTabArr: [
        {
          name: "防火类",
          index: "01",
        },
        {
          name: "防汛类",
          index: "02",
        },
        {
          name: "抗震救灾类",
          index: "03",
        },
        {
          name: "救灾物资类",
          index: "04",
        },
        {
          name: "其他",
          index: "05",
        },
      ],
      ids: [],
      componentKey: 0,
      isOuterVisible: false,
      Newaddress: {},
      storeArea: "xxx",
      isDialogVisible: 0,
      renyuan: "",
      renyuanType: "",
      dialogVisible: false,
      filterText: "",
      renyuanfilterText: "",

      defaultProps: {
        children: "children",
        label: "label",
      },
      numberValidateForm: {
        id: "",
        depId: "", //部门id，暂时自填
        storeName: "", //仓库名称
        storeArea: "", //主管单位
        address: "", //驻地位置
        coordinateX: "", //x坐标
        coordinateY: "", //y坐标
        leveled: "", //仓库级别
        storeNature: "", //仓库等级
        headName: "", //责任人
        headPhone: "", //责任人电话
        materialsList: [],
      },
      materialsList1: [],
      materialsList2: [],
      materialsList3: [],
      materialsList4: [],
      materialsList5: [],
      options: [
        {
          value: "0",
          label: "自有",
        },
        {
          value: "1",
          label: "租用",
        },
        {
          value: "2",
          label: "借用",
        },
      ],
      zboptions: [
        {
          label: "被服类",
          value: "被服类",
        },
        {
          label: "安置类",
          value: "安置类",
        },
        {
          label: "装具类",
          value: "装具类",
        },
        {
          label: "装备类",
          value: "装备类",
        },
        {
          label: "其他类",
          value: "其他类",
        },
      ],
      value: "",
      TabIndex: 0,
      tabArr: [
        {
          name: "仓库详情",
          index: 0,
        },
        {
          name: "仓库人员",
          index: 1,
        },
      ],
      currentTables: {}, //
      table: {
        loading: false,
        query: {},
        sort: {
          descs: ["updateTime"],
        },
        page: this.$yzvue.initPage(),
      },
    };
  },
  mounted() {
    this.loadTable();
    console.log("records", this.table.page, this.$yzvue.initPage());
  },
  created() {
    this.currentTables = JSON.parse(localStorage.getItem("tempList"));
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    renyuanfilterText(val) {
      this.$refs.newtree.filter(val);
    },
    newdialogVisible(val) {
      console.log(val);
      this.dialogVisible = val;
    },
    $route(to, from) {
      console.log("路由跳转监听:", to, from);
      window.location.reload(); // 这个方法可行 直接就强制刷新
    },
  },
  methods: {
    Back() {
      if (this.$route.query.depId) {
        this.$router.go(-1);
      } else {
        this.loadTable();
      }
      this.isEdit = false;
    },
    bianji() {
      this.isEdit = true;
    },
    getwzTabindex(e) {
      console.log(this.table.page.records, this.materialsList1);
      if (e == 0) {
        this.tabBiaoshi = "01";
        if (this.List1 == 0) {
          this.getXq(this.numberValidateForm.id, "01");
        } else {
          this.$nextTick(() => {
            this.$yzvue.assembleBody(this.table.page, {
              records: this.materialsList1,
            });
            this.table.loading = false;
            this.$initDragTable(this.$refs[""], this.table.page, "records");
          });
        }
      } else if (e == 1) {
        this.tabBiaoshi = "02";
        if (this.List2 == 0) {
          this.getXq(this.numberValidateForm.id, "02");
        } else {
          this.$nextTick(() => {
            this.$yzvue.assembleBody(this.table.page, {
              records: this.materialsList2,
            });
            this.table.loading = false;
            this.$initDragTable(this.$refs[""], this.table.page, "records");
          });
        }
      } else if (e == 2) {
        this.tabBiaoshi = "03";
        if (this.List3 == 0) {
          this.getXq(this.numberValidateForm.id, "03");
        } else {
          this.$nextTick(() => {
            this.$yzvue.assembleBody(this.table.page, {
              records: this.materialsList3,
            });
            this.table.loading = false;
            this.$initDragTable(this.$refs[""], this.table.page, "records");
          });
        }
      } else if (e == 3) {
        this.tabBiaoshi = "04";
        if (this.List4 == 0) {
          this.getXq(this.numberValidateForm.id, "04");
        } else {
          this.$nextTick(() => {
            this.$yzvue.assembleBody(this.table.page, {
              records: this.materialsList4,
            });
            this.table.loading = false;
            this.$initDragTable(this.$refs[""], this.table.page, "records");
          });
        }
      } else if (e == 4) {
        this.tabBiaoshi = "05";
        if (this.List5 == 0) {
          this.getXq(this.numberValidateForm.id, "05");
        } else {
          this.$nextTick(() => {
            this.$yzvue.assembleBody(this.table.page, {
              records: this.materialsList5,
            });
            this.table.loading = false;
            this.$initDragTable(this.$refs[""], this.table.page, "records");
          });
        }
      }
    },
    getAddress(e) {
      this.numberValidateForm.address = e;
    },
    clsoe() {
      this.isOuterVisible = false;
    },
    // 开启成员选择
    tianjia(e) {
      this.isOuterVisible = e;
      console.log(this.isOuterVisible);
    },
    // 新增成员
    addMembers() {
      this.isOuterVisible = false;
      this.isDialogVisible = true;
    },
    // 获取负责人
    getHeadName(e) {
      this.isOuterVisible = false;
      if (e == "") return;
      console.log(e);
      this.$set(this.numberValidateForm, "headName", e.displayName);
      this.$set(this.numberValidateForm, "headPhone", e.phoneNum);
      this.$set(this.numberValidateForm, "headId", e.id);
      console.log(e.displayName, this.numberValidateForm.headName);
    },
    getName(e) {
      this.$set(this.numberValidateForm, "headPhone", e.phone);
      this.$set(this.numberValidateForm, "headName", e.name);
      this.$set(this.numberValidateForm, "headId", e.id);
    },
    jianting(e) {
      console.log(e);
      this.isDialogVisible = 0;
    },
    xinzeng() {
      console.log("新增成员");
      this.isDialogVisible = 1;
      this.dialogVisible = false;
    },
    childValue(e) {
      console.log(e);
      this.Newaddress = e;
      this.Newaddress.address = this.numberValidateForm.address;
      // this.numberValidateForm.address = e.address
      this.numberValidateForm.coordinateX = e.latitude;
      this.numberValidateForm.coordinateY = e.longitude;
      console.log(this.numberValidateForm);
    },
    handleClose() {
      this.dialogVisible = false;
      console.log(12234, this.dialogVisible);
      this.$forceUpdate();
    },

    submitForm(formName) {
      console.log(this.table.page.records, this.numberValidateForm.depId);
      this.numberValidateForm.depId = this.$userInfo.orgId;
      this.numberValidateForm.materialsList = [
        ...this.materialsList1,
        ...this.materialsList2,
        ...this.materialsList3,
        ...this.materialsList4,
        ...this.materialsList5,
      ];
      if (
        this.numberValidateForm.coordinateX == "" ||
        this.numberValidateForm.coordinateY == ""
      ) {
        this.$message({
          message: "请选择经纬度",
          type: "warning",
        });
        return;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = this.numberValidateForm;
          storeInfoSaveOrUpdate({
            ...data,
            depId: this.$userInfo.orgId,
            ids: this.ids.join(),
          }).then((res) => {
            console.log(res, "保存成功");
            if (res.code == 0 && res) {
              this.isEdit = false;
              this.$message.success("保存成功");
              this.loadTable();
            } else {
              this.$message.error("服务端返回数据异常");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.loadTable();
    },
    // 添加
    addMaterial() {
      this.$yzvue.newAddItem(this.table.page);
      this.$nextTick(() => {
        let container = this.$el.querySelector(".el-table__body-wrapper");
        container.scrollTop = container.scrollHeight;
      });
      console.log(this.table.page);
    },
    getTabindex(e) {
      this.TabIndex = e;
    },
    handleQuery() {
      this.loadTable();
    },

    async loadTable() {
      let param = this.getQueryParam();
      console.log(param);
      this.table.loading = true;
      this.numberValidateForm.storeName = this.$userInfo.orgName;
      storeInfoGetByDepId({
        depId: this.$route.query.depId ? this.$route.query.depId : this.$userInfo.orgId,
      }).then((res) => {
        console.log(res.data, "wwwwww");
        if (res.code == 0 && res.data) {
          this.numberValidateForm = res.data;
          this.Newaddress = {
            address: this.numberValidateForm.address,
            latitude: this.numberValidateForm.coordinateX,
            longitude: this.numberValidateForm.coordinateY,
          };
          (this.wzTabArr = [
            {
              name: `防火类（${res.data.protectNum}）`,
              index: "01",
            },
            {
              name: `防汛类（${res.data.floodNum}）`,
              index: "02",
            },
            {
              name: `抗震救灾类（${res.data.shockproofNum}）`,
              index: "03",
            },
            {
              name: `救灾物资类（${res.data.disasterNum}）`,
              index: "04",
            },
            {
              name: `其他（${res.data.otherNum}）`,
              index: "05",
            },
          ]),
            this.getXq(res.data.id, "01");
        }
      });
      let data = { depId: this.$userInfo.orgId };
    },
    getXq(id, type) {
      storeInfoGetStoreInfo({ id: id, type: type }).then((res) => {
        console.log(res);
        if (res.data && res.code == 0) {
          this.$yzvue.assembleBody(this.table.page, {
            records: res.data.list,
          });
          console.log(res, this.table.page, "www");
          this.table.loading = false;
          this.$nextTick(() => {
            this.$initDragTable(this.$refs[""], this.table.page, "records");
          });
          if (type == "01") {
            this.List1 = 1;
            this.materialsList1 = res.data.list.map((item, index) => {
              item.firstStoreType = "01";
              return item;
            });
          } else if (type == "02") {
            this.List2 = 2;
            this.materialsList2 = res.data.list.map((item, index) => {
              item.firstStoreType = "02";
              return item;
            });
          } else if (type == "03") {
            this.List3 = 3;
            this.materialsList3 = res.data.list.map((item, index) => {
              item.firstStoreType = "03";
              return item;
            });
          } else if (type == "04") {
            this.List4 = 4;
            this.materialsList4 = res.data.list.map((item, index) => {
              item.firstStoreType = "04";
              return item;
            });
          } else if (type == "05") {
            this.List5 = 5;
            this.materialsList5 = res.data.list.map((item, index) => {
              item.firstStoreType = "05";
              return item;
            });
          }
        }
      });
    },
    getQueryParam() {
      let param = this.$yzvue.assemblePage(this.table);
      let query = this.table.query;
      this.$yzvue.appendFilter(param.body.filters, "name", "like", query.name);
      return param;
    },
    // 编辑
    handleEdit($scope) {
      let {
        scope: { scope },
      } = $scope;
      this.$set(this.table.page.records[scope.$index], "editing", true);
      this.currentTables = JSON.parse(
        JSON.stringify(this.table.page.records[scope.$index])
      ); // 保存当前历史编辑行
      console.log("records---", this.table.page.records);
    },
    // 保存
    handleSave($scope) {
      let {
        scope: { scope },
      } = $scope;
      console.log(scope);
      if (
        !scope.row.secondStoreType ||
        !scope.row.storeSpecs ||
        !scope.row.storeName ||
        !scope.row.storeNum
      ) {
        this.$message({
          message: "请完善仓库装备信息！",
          type: "warning",
        });
        return;
      }
      if (scope.row.is_New_Add) {
        console.log(scope, "新增");
        scope.row.firstStoreType = this.tabBiaoshi;
        this.$set(this.table.page.records[scope.$index], "is_New_Add", false);
      }
      this.$set(this.table.page.records[scope.$index], "editing", false);
      console.log($scope, "1212", this.table.page.records);
     const sum = this.table.page.records.reduce((accumulator, currentValue) => parseInt(accumulator) +  parseInt(currentValue.storeNum), 0);
     console.log(sum);
      if (this.tabBiaoshi == "01") {
        this.materialsList1 = this.table.page.records;
        this.wzTabArr[0].name = `防火类（${sum}）`;
      } else if (this.tabBiaoshi == "02") {
        this.wzTabArr[1].name = `防汛类（${sum}）`;
        this.materialsList2 = this.table.page.records;
      } else if (this.tabBiaoshi == "03") {
        this.wzTabArr[2].name = `抗震救灾类（${sum}）`;
        this.materialsList3 = this.table.page.records;
      } else if (this.tabBiaoshi == "04") {
        this.wzTabArr[3].name = `救灾物资类（${sum}）`;
        this.materialsList4 = this.table.page.records;
      } else if (this.tabBiaoshi == "05") {
        this.wzTabArr[4].name = `其他（${sum}）`;
        this.materialsList5 = this.table.page.records;
      }

      // 请求后台接口更新数据库
    },
    // 取消
    handleCancel($scope) {
      let {
        scope: { scope },
      } = $scope;
      console.log("scope.is_New_Add", scope);
      if (scope.row.is_New_Add) {
        this.table.page.records = this.table.page.records.filter((item) => {
          return !item.is_New_Add;
        });
        return;
      }
      this.$set(this.table.page.records, scope.$index, {
        ...this.currentTables,
        editing: false,
      });
    },
    //删除
    handleDelete($scope) {
      let {
        scope: { scope },
      } = $scope;
      this.ids = [...this.ids, this.table.page.records[scope.$index].id];
      console.log(this.ids, this.table.page.records[scope.$index].id);
      this.table.page.records.splice(scope.$index, 1);
      if (this.tabBiaoshi == "01") {
        this.materialsList1 = this.table.page.records;
        this.wzTabArr[0].name = `防火类（${this.table.page.records.length}）`;
      } else if (this.tabBiaoshi == "02") {
        this.wzTabArr[1].name = `防汛类（${this.table.page.records.length}）`;
        this.materialsList2 = this.table.page.records;
      } else if (this.tabBiaoshi == "03") {
        this.wzTabArr[2].name = `抗震救灾类（${this.table.page.records.length}）`;
        this.materialsList3 = this.table.page.records;
      } else if (this.tabBiaoshi == "04") {
        this.wzTabArr[3].name = `救灾物资类（${this.table.page.records.length}）`;
        this.materialsList4 = this.table.page.records;
      } else if (this.tabBiaoshi == "05") {
        this.wzTabArr[4].name = `其他（${this.table.page.records.length}）`;
        this.materialsList5 = this.table.page.records;
      }
      // 请求后台接口删除数据库数据
    },
    // 机构树
  },
};
</script>
<style lang="scss">
@import "../../style/variables.scss";
$header-color: $tx-list-table-header-color;
$header-color-select: $tx-color-primary;
.bigBox {
  width: 100%;
  height: 100%;
  position: relative;

  .bigBox-box {
    padding: 20px;
    .bigBox-box-tab {
      // margin-top: 20px;
      .bigBox-box-tab-item {
        height: 32px;
        display: flex;
        margin-bottom: 25px;
        line-height: 32px;
        justify-content: space-between;
        // margin-right: 100px;
        .el-form-item__label {
          line-height: 32px !important;
          font-size: 16px;
          font-family: MicrosoftYaHei;
          color: #cbe7ff !important;
        }
        .el-input-group__append,
        .el-input-group__prepend {
          background: rgba(124, 173, 216, 0.2) !important;
          border-radius: 0px 4px 4px 0px !important;
          border: 1px solid #7cadd8 !important;
          color: #ffffff;
        }
        .el-form-item {
          width: 33%;
        }
        .bigBox-box-tab-item-xq {
          width: 450px;
          text-align: left;
          // line-height: 32px;
          // height: 32px;
          font-size: 16px;
          font-family: MicrosoftYaHei;
          color: #ffffff;
        }
        .append-box {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          font-size: 16px;
          cursor: pointer;
          // height: 30px;
        }
        .append-img {
          width: 14px;
          height: 14px;
          margin-left: 10px;
          background: url("~@/assets/TeamAdministrator/location.png") no-repeat;
        }
      }
    }
  }
  .el-form-item__label {
    line-height: 32px !important;
    font-size: 16px;
    font-family: MicrosoftYaHei;
    color: #cbe7ff !important;
    text-align: right;
  }

  textarea {
    height: 100px; /* 固定高度 */
    width: 100%; /* 宽度百分比 */
    background: transparent; //  背景透明
    border: 1px solid #7cadd8;
  }
  .el-textarea__inner {
    background: transparent; //  背景透明
    color: #fff !important;
  }
  .el-input__count {
    background-color: transparent;
    color: #7cadd8;
  }
  //表格样式
  .el-table {
    color: $c-font-table;
    border: 0;
    .el-tooltip {
      width: auto !important;
    }
    &::before {
      background: transparent;
    }
  }
  // .el-table tr
  .el-table tr {
    background: rgb(29 63 106);
    &.success-row {
      box-shadow: inset 0px 0px 2px #4a729e;
      background: #274a77;
    }
    &:hover {
      cursor: pointer;
      box-shadow: inset 0px 0px 15px #fff !important;
      td {
        background: #285584 !important;
      }
    }
  }
  .el-table th {
    background-color: $tx-list-table-header-background !important;
    color: #fff;
    border: 0;
    > .cell {
      // display: flex;
      // justify-content: center;
      // align-items: center;
      // color: $header-color;
    }
  }
  .el-table--border th,
  .el-table--border td {
    // border-right: 1px solid $tx-list-table-border;
    // border-bottom: 1px solid $tx-list-table-border;
    border: 0 !important;
  }
  .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    border: 0;
  }
  .el-table--border {
    // border-top: 1px solid $tx-list-table-border;
    // border-left: 1px solid $tx-list-table-border;
    border: 0;
  }

  .el-table .caret-wrapper .descending {
    // border-top-color: $header-color;
  }
  .el-table .caret-wrapper .ascending {
    // border-bottom-color: $header-color;
  }
  .el-table .descending .caret-wrapper .descending {
    // border-top-color: $header-color-select;
  }
  .el-table .ascending .caret-wrapper .ascending {
    // border-bottom-color: $header-color-select;
  }

  .cell {
    .el-button--text {
      padding-top: 0px;
      padding-bottom: 0px;
      margin-left: 5px;
    }
  }
  .cell .tx-table-column-action {
    display: inline;
    a {
      margin-left: 0px;
    }
    .el-button--text {
      margin-left: 0px;
    }
  }

  .tx-list-table-header {
    .cell {
      white-space: nowrap;
    }
  }
  .el-loading-mask .el-loading-spinner {
    top: 10%;
  }
}
.dialogBox-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 474px;
}
.dialogBox-box-left {
  width: 50%;
}
.dialogBox-box-right {
  width: 50%;
}
.treeBox {
  height: 406px;
  overflow: auto;
}
.xuanzechengyuanBox {
  display: flex;
  justify-content: space-between;
}
.tianjiachengyuan {
  margin-bottom: 15px;
  color: #4af6fc;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.chengyuanImg {
  width: 14px;
  height: 14px;
  background: url("~@/assets/TeamAdministrator/icon_add.png");
  margin-right: 8px;
}
.title {
  margin-bottom: 15px;
  color: #fff;
}
.el-tree {
  width: 100%;
  background-color: transparent;
  color: rgba(255, 255, 255, 0.9);
}
// 重置dialog样式
.el-dialog {
  background: transparent;
  //   box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
  //   border-radius: 4px;

  .el-dialog__header {
    background: rgba(6, 50, 88, 0.9);
    padding: 20px 0 0 20px;
    height: 24px;
    line-height: 24px;
  }

  .el-dialog__title {
    // color: #313335;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
  }

  .el-dialog__headerbtn {
    top: 20px;
    right: 20px;
    height: 14px;
    line-height: 14px;

    .el-dialog__close {
      // color: #354052;
      color: #4af6fc;
      width: 14px;
      height: 14px;
    }
  }

  .el-dialog__body {
    width: calc(100% - 40px);
    padding: 30px 20px 20px;
    // font-size: 0.16px;
    font-size: 0.18px;
    color: #313335;
    background: rgba(6, 50, 88, 0.9);
  }
  .el-dialog__footer {
    background: rgba(6, 50, 88, 0.9) !important;
  }
}
.el-tree-node:focus > .el-tree-node__content {
  background: rgba(74, 246, 252, 0.1);
  box-shadow: inset 0px 0px 10px 0px #4af6fc;
}
.el-tree-node__content:hover {
  background: rgba(74, 246, 252, 0.1);
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background: rgba(74, 246, 252, 0.1);
  box-shadow: inset 0px 0px 10px 0px #4af6fc;
}
.renyuan {
  background: url("~@/assets/TeamAdministrator/input_box-contacts.png") no-repeat !important;
}
.chengyuanxiangqing {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background: url("~@/assets/TeamAdministrator/icon_folder_shut(3).png");
}
.zhedie {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background: url("~@/assets/TeamAdministrator/icon_folder_shut(2).png");
}
.zhankai {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background: url("~@/assets/TeamAdministrator/icon_folder_shut(1).png");
}
.geren {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background: url("~@/assets/TeamAdministrator/icon_folder_shut.png");
}
.dialogBox-box-right {
  border-left: 1px solid #1d5a8f;
  padding-left: 8px;
}
.dialogBox-box-left {
  padding-right: 8px;
}
.el-tree > .el-tree-node {
  display: inline-block;
  min-width: 100%;
}
.el-form-item__label-wrap {
  margin: 0 !important;
}
// .cell {
//   display: flex;
//   justify-content: center !important;
// }
.el-table .el-table__cell.is-center {
  text-align: left;
}
.bigBox-box-tab-item-xq {
  text-align: left !important;
}
.newBox-title {
  width: 1836px;
  height: 48px;
  font-size: 24px;
  font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
  font-weight: bold;
  color: #4af6fc;
  text-align: center;
  line-height: 48px;
  background: linear-gradient(
    90deg,
    rgba(51, 153, 255, 0) 0%,
    rgba(0, 160, 255, 0.26) 50%,
    rgba(51, 153, 255, 0) 100%
  );
  margin-bottom:15px;
}
.newBox-title1{
  width: 1836px;
  height: 48px;
  font-size: 24px;
  font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
  font-weight: bold;
  color: #4af6fc;
  text-align: center;
  line-height: 48px;
  background: linear-gradient(
    90deg,
    rgba(51, 153, 255, 0) 0%,
    rgba(0, 160, 255, 0.26) 50%,
    rgba(51, 153, 255, 0) 100%
  );
}
.new-List-box {
  width: 1836px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .new-List-box-title {
    width: 160px;
    height: 48px;
    display: flex;
    justify-content: flex-start;
    padding-left: 20px;
    font-size: 16px;
    font-family: MicrosoftYaHei;
    color: #cbe7ff;
    line-height: 48px;
    background: rgba(0, 153, 255, 0.2);
    border: 1px solid rgba(0, 153, 255, 0.2);
  }
  .new-List-box-name {
    width: 412px;
    height: 48px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 16px;
    padding-left: 20px;
    font-family: MicrosoftYaHei;
    line-height: 48px;
    color: #ffffff;
    background: rgba(0, 153, 255, 0.06);
    border: 1px solid rgba(0, 153, 255, 0.2);
  }
}
.el-form-item {
  margin-bottom: 0 !important;
}
// .lianghangchang {
//   width: 1044px;
// }
.el-input.is-disabled .el-input__inner {
  height: 32px !important;
}
</style>
